<template>
  <layout-slot>
    <article class="main-content page-page">
      <div class="post-header">
        <h1 class="post-title" itemprop="name headline">
          关于 </h1>
        <div class="post-data">
          <time datetime="2020-04-27T23:04:00+08:00" itemprop="datePublished"><i class="fa fa-clock-o"
                                                                                 aria-hidden="true"> </i> {{ aboutDetail.date |  dateFormat('{y}-{m}-{d}') }}
          </time>&nbsp;&nbsp; <i class="fa fa-comments-o" aria-hidden="true"></i> <a href="#comments"> {{ aboutDetail.comments }} 评论</a>&nbsp;&nbsp;
          <i class="fa fa-eye" aria-hidden="true"></i> {{ aboutDetail.view }} 浏览
        </div>
      </div>
      <div id="post-content" class="post-content">
        <p>
          <span v-html="aboutDetail.intro"></span>
          <img class="smilies" src="https://rawchen.com/usr/plugins/Smilies/bilibili/icon_smile.png"
               alt="icon_smile.png" style="max-width:32px;display:inline-block; box-shadow: none; margin-bottom: -8px;">
          <img class="smilies" src="https://rawchen.com/usr/plugins/Smilies/bilibili/icon_rolleyes.png"
               alt="icon_rolleyes.png"
               style="max-width:32px;display:inline-block; box-shadow: none; margin-bottom: -8px;">
          <img class="smilies" src="https://rawchen.com/usr/plugins/Smilies/bilibili/chigua.png" alt="chigua.png"
               style="max-width:32px;display:inline-block; box-shadow: none; margin-bottom: -8px;">
          <img class="smilies" src="https://rawchen.com/usr/plugins/Smilies/bilibili/guzhang.png" alt="guzhang.png"
               style="max-width:32px;display:inline-block; box-shadow: none; margin-bottom: -8px;">
          <img class="smilies"
               src="https://rawchen.com/usr/plugins/Smilies/bilibili/icon_biggrin.png"
               alt="icon_biggrin.png"
               style="max-width:32px;display:inline-block; box-shadow: none; margin-bottom: -8px;">
        </p>

        <img id="githubChart" src="https://ghchart.rshah.org/2016rshah/arrowfield"
             onclick="window.open('https://github.com/arrowfield')">
        <div class="about-contact">
          <a href="http://wpa.qq.com/msgrd?v=3&uin=768449566&site=qq&menu=yes" target="_blank">
            <div class="qq">
              <span class="content">768449566</span>
              <i class="fa fa-qq"></i>
            </div>
          </a>
          <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=nP3u7vPr_vX58Pj65uzc7e2y--Px" target="_blank">
            <div class="email">
              <span class="content">arrowfieldfzp@qq.com</span>
              <i class="fa fa-envelope-o"></i>
            </div>
          </a>
          <a href="https://twitter.com/zipfang" target="_blank">
            <div class="telegram">
              <span class="content">zipingfang</span>
              <i class="fa fa-telegram"></i>
            </div>
          </a>
        </div>
        <h1>项目版权</h1>
        <p>如侵犯他人著作权、名誉权、隐私权及肖像权等请联系本站删除。</p></div>
    </article>
<!--    <gitalk/>-->
    <message/>
  </layout-slot>
</template>

<script>
  import LayoutSlot from "@/views/skins/GreenBook/slot/layout-slot";
  import Message from "@/components/Twikoo";
  import Gitalk from "@/components/Gitalk";
  import {getMoviesDetail, recordCount} from "@/api/home";
  import {mapState} from "vuex";
  import * as twikoo from "twikoo"
  export default {
    name: "about",
    components: {Message, LayoutSlot,Gitalk},
    data(){
      return{
        aboutDetail:{
          intro:"",
          date:"",
          view:"",
          comments:"-"
        }
      }
    },
    computed:{
      ...mapState({
        // comments:state => state.comments
      })
    },
    methods:{
      getAboutPage() {
        // console.log(this.$store.state.comments)
        this.$store.commit("setLoading",true)
        getMoviesDetail({path: "/about.html"}).then(({data}) => {
          this.aboutDetail ={
            intro:data.data.articleContent,
            date:data.data.articleUpdated,
            view:data.data.articleViewCount,
            comments:'-'
          }
          // 记录浏览量
          recordCount({id: data.data.oId}).then((res) => {
          })
          this.$store.commit("setLoading",false)
        })

        twikoo.getCommentsCount({
          envId: 'zipblog-7gf2s5zga5ea47b1', // 环境 ID
          // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
          urls: [ // 不包含协议、域名、参数的文章路径列表，必传参数
            this.$route.path
          ],
          includeReply: false // 评论数是否包括回复，默认：false
        }).then( (res)=> {

          this.aboutDetail.comments = res[0].count
          // 返回示例: [
          //   { url: '/2020/10/post-1.html', count: 10 },
          //   { url: '/2020/11/post-2.html', count: 0 },
          //   { url: '/2020/12/post-3.html', count: 20 }
          // ]
        }).catch(function (err) {
          // 发生错误
          console.error(err);
        });

      }
    },
    mounted() {
      this.getAboutPage()
    }
  }
</script>

<style scoped>

</style>
